<?php
    use User\Model\QuestionnaireModel;
?>
<style>
    .next-step{height:40px;float:right;padding-top:10px;margin-left:30px;margin-top:-5px}
    .end-setting{color:black;float:right;font-weight: bold}
    .edit-question{color:blue;float:right;font-weight: bold}

    .table>thead>tr>th{text-align: center}
    .table>tbody>tr>td{vertical-align: middle; text-align: center}
    .table>tbody>tr>td>span>i{vertical-align: middle; text-align: center;font-size: 30px}
</style>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <span>题目设置</span>
                <a href="/User/Questionnaire/ending?questionnaire_id={$questionnaire_id}" class="btn btn-default next-step">&nbsp;下一步&nbsp;</a>
                <span class="end-setting">&nbsp;结束页设置</span>
                <span class="edit-question">创建题目&nbsp;></span>
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs" id="myTab">
                        <li><a href="/User/Questionnaire/question?id={$questionnaire_id}">主干题目</a></li>
                        <li class="active"><a href="javascript:;">分支题目</a></li>
                    </ul>
                </div>
                <div class="panel-heading" style="background-color:white;border:0">
                    <a style="margin-left:7px" href="/User/Questionnaire/editBranchQuestion?questionnaire_id={$questionnaire_id}" class="btn btn-success">新建</a>
                    <a href="javascript:;" id="deleteAll" class="btn btn-danger">删除</a>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th width="5%"><input type="checkbox" id="selectAll"></th>
                                <th width="10%">编号</th>
                                <th width="50%">标题</th>
                                <th width="20%">操作</th>
                                <th width="15%">排序</th>
                            </tr>
                            </thead>
                            <tbody class="sortablelist">
                            <volist name="list" id="item">
                                <tr class="sortableitem tr-{$item.id}" data-id="{$item.id}">
                                    <td><input type="checkbox" name="ids" value="{$item.id}"></td>
                                    <td>{$item.displayorder}</td>
                                    <td>
                                        <empty name="item.title_image">
                                            {$item.title}
                                        <else />
                                            <img src="{$item.title_image}" width="100px" height="100px">
                                        </empty>
                                    </td>
                                    <td>
                                        <a type="button" href="/User/Questionnaire/editBranchQuestion?question_id={$item['id']}&questionnaire_id={$questionnaire_id}" class="btn btn-info">编辑</a>
                                        <a type="button" href="javascript:;" onclick="return deleteQuestion({$item['id']});" class="btn btn-danger">删除</a>
                                    </td>
                                    <td><span class="moveup"><i class="fa fa-arrow-circle-o-up"></i></span>&nbsp;&nbsp;<span class="movedown"><i class="fa fa-arrow-circle-o-down"></i></span></td>
                                </tr>
                            </volist>
                            </tbody>
                        </table>
                    </div>
                    <div class="pages">
                        {$page}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/Public/js/common/jquery.clickSort.js"></script>
<script>
    $(function(){
        $('.sortablelist').clickSort();
    })

    $("#selectAll").click(function(){
        if($(this).prop('checked') == true){
            $("input[name=ids]").prop('checked',true);
        }else{
            $("input[name=ids]").prop('checked',false);
        }
    })

    $("#deleteAll").click(function(){
        if(!confirm('确认删除吗？')) return false;
        var ids = "";
        $("input[name=ids]").each(function() {
            if($(this).prop("checked")){
                ids += $(this).val() + "|";
            }
        });
        if(ids !== ''){
            $.ajax({
                data: {ids: ids},
                dataType: 'json',
                url: '/User/Questionnaire/deleteQuestions',
                type: 'get',
                success: function (res) {
                    alert(res['info']);
                    window.location.reload();
                }
            });
        }else{
            alert('请勾选题目！');
        }
    });

    function deleteQuestion(id){
        if(!confirm('确认删除吗？')) return false;
        $.ajax({
            data: {id: id},
            dataType: 'json',
            url: '/User/Questionnaire/deleteQuestion',
            type: 'get',
            success: function (res) {
                alert(res['info']);
                window.location.reload();
            }
        });
        return false;
    }

    function callback(id1, id2){
        var url = "/User/Questionnaire/updateSort";
        $.ajax({
            url: url,
            type:"post",
            dataType: 'json',
            data:{ id1: id1, id2: id2},
            success:function(result){
                $(".tr-" + id1).find("td:eq(1)").html(result.displayorder1);
                $(".tr-" + id2).find("td:eq(1)").html(result.displayorder2);
            }
        });
    }
</script>